<template>
   <div>
    <div>user:{{user}}</div>
    <!-- <h1>登录</h1>
    <div>账号：<input type="text"></div>
      <div>密码：<input type="text"></div>
      <button>登录</button> -->
      <van-form @submit="login">
  <van-field
    v-model="user.phone"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="user.password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">提交</van-button>
  </div>
</van-form>
      <hr>
      <router-link to="/index">前往首页</router-link>
   </div>
</template>

<script>
import{reglogin} from '../../http/http'
import axios from "axios"
export default {
data(){
   return{
      user:{
         phone:"",
         password:""
      }
   }
}, methods:{
    login(){
      //发请求
      axios({
 url:"/api/login",
        method:"post",
        data:this.user
      }).then(res=>{
        console.log("交互成功");
        console.log(res);
        if(res.data.code===200){
          //登录成功
          // ①弹成功 
          alert(res.data.msg)

          // ②存判断是否登录的标识,而且这个标识我们存了用户的信息
          localStorage.setItem("isLogin",JSON.stringify(res.data.list))

          // ③ 跳转到首页 
          this.$router.push("/index/home")
        }else{
          //登录失败
          alert(res.data.msg)
        }
      })

      if(this.user.phone==='admin'&&this.user.password==="zbn4yyds"){
        // 我们需要一个标识，来判断是否登录成功了 isLogin=1  

                // 存用户的角色======================看这句=========
        localStorage.setItem("type",this.type)

         // 我们需要一个标识，来判断是否登录成功了 isLogin=1  
        localStorage.setItem("isLogin",1)
        this.$router.push("/index/home")
      }else{
        alert("账号密码错误")
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../less/index.less";

</style>